<template>
  <div class="app-container">
    <div class="margin-bottom-xl">
       <!-- 检索 start -->
        <el-filter
          size="medium"
          :data="filterInfo.data"
          :field-list="filterInfo.fieldList"
          :list-type-info="listTypeInfo"
          :show-selection="false"
          @handleFilter="handleFilter"
          @handleReset="handleReset"
          @handleEvent="handleEvent"
        />
        <!-- 检索 end -->
    </div>
    <el-row type="flex" :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" justify="start">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>管理员</span>
          </div>
          <div>
            <!-- 公共操作 star -->
            <fire-oper-menu
              :show-excel-export="true"
              :show-excel-import="true"
              @ExcelExport="handleDownload"
              @handleCreate="handleCreate"
              @handleDeleteAll="handleDeleteAll"
            />
            <!-- 公共操作 end -->

            <!-- 数据列表 start -->
            <fire-table
              ref="table"
              :list="list"
              :total="total"
              :showIndex="false"
              :list-loading="listLoading"
              :list-query="filterInfo.data"
              :columns="tableColumns"
              :handle="tableHandle"
              @getList="getList"
              @handleSelectionChange="handleSelectionChange"
            >
              <template slot-scope={row,index} slot="action">
                <el-button type="primary" size="mini" @click="selectRow(row,index)">选择<i class="el-icon el-icon--right"></i></el-button>
              </template>
              
            </fire-table>
            <!-- 数据列表 end -->
          </div>
        </el-card>
      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>应用授权</span>
          </div>
          <div style="text-align: center">
            <el-transfer
              v-model="value"
              style="text-align: left; display: inline-block"
              filterable
              :left-default-checked="[2, 3]"
              :right-default-checked="[1]"
              :titles="['未授权应用', '已授权应用']"
              :button-texts="['取消', '授权']"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
              }"
              :data="applicationList"
              @change="handleChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAddons,getUserList } from 'diandi-admin/lib/api/admin/user'
import { fetchList } from 'diandi-admin/lib/api/addons/addons.js'
import { parseTime } from '@/utils'
import {
  fetchList as fetchGroup
} from 'diandi-admin/lib/api/admin/group.js'

import {
  getStoreGroup
} from 'diandi-admin/lib/api/addons/bloc.js'

export default {
 data () {
   return {
      listtree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      applicationList: [],
      value: [1],
      value4: [1],
      renderFunc(h, option) {
        return <span>{ option.key } - { option.label }</span>
      },
      filterInfo: {
        data: {
          page: 1,
          pageSize: 20
        },
        fieldList: [{
          label: '用户名称',
          type: 'input',
          value: 'User[name]'
        },
        {
          label: '用户组',
          type: 'select',
          value: 'User[group_id]',
          list: 'groupList'
        }
        ]
      },
       // 表格数据 start
      tableColumns: [{
        label: 'ID',
        prop: 'id',
        width: 50
      },
      {
        label: '用户名称',
        prop: 'username',
        width: 180
      },
      {
        label: '操作',
        width: 100,
        type:'slot',
        slot:'action',
        align: 'center'

      }],
      listTypeInfo: {
        groupList: []
      },
      total:0,
      list:[],
      tableHandle:[],
      listLoading:true
   }
 },
  created() {
    let that = this
    that.getList()
    that.getStoreLists()
    that.getAddonsList()
  },
  methods: {
    selectRow(row,index){
      console.log(row,index)
    },
    initGroup(res) {
      console.log('239', res)
      let that = this
      that.listLoading = true
      fetchGroup(that.filterInfo.data).then(response => {
        console.log('response', response)
        that.total = response.data.dataProvider.total
        that.list = response.data.dataProvider.allModels
        console.log('列表数据层级测试', that.list)
        that.listLoading = false
      })
    },
    getAddonsList(){
      const data = {
        id:this.user_id
      }
      getAddons(data).then(res => {
        if (res.code === 200) {
          this.listtree = res.data.list
        }
      })
    },
    handleNodeClick(data) {
      console.log(data)
    },
    getStoreLists() {
      getStoreGroup().then(res => {
        if (res.code === 200) {
          this.listtree = res.data.list
        }
      })
    },
    handleChange(){

    },
    // 触发请求
    async resetForm() {
      console.log(this.$refs.form.resetForm())
      await this.$refs.form.resetForm()
    },
    handleSelectionChange(val) {
      console.log('传递来的', val)
    },
    handleRequestSuccess() {
      this.$message.success('发送成功')
    },
    getList() {
      let that = this
      that.listLoading = true
      getUserList(that.filterInfo.data).then(response => {
        console.log('response', response)
        that.total = response.data.dataProvider.total
        const list = response.data.dataProvider.allModels
        that.list = [...list]
        console.log('列表数据层级测试', that.list)
        that.listLoading = false
      })
    },
    /** 搜索 */
    handleFilter(row) {
      let that = this
      console.log(row)
      that.$set(that.filterInfo, 'data', row)
      console.log('检索前', that.filterInfo.data)
      that.getList()
    },
    /** 重置 */
    handleReset(row) {
      console.log(row)
    },
    /** 焦点失去事件 */
    handleEvent(row) {
      console.log(row)
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    handleCreate() {
      const that = this
      this.resetForm()
      console.log(this.list)
      that.dialogStatus = 'create'
      that.dialogFormVisible = true
    },
    handleDeleteAll() {
      console.log('删除')
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    updateData() {},
    handleDelete(row, index) {
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['title', 'create_time']
        const filterVal = [{ title: '12', create_time: '23435345353' }]
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>
<style type="text/css">
  .main-content{
    display: flow-root;
  }
</style>